import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Swiper, SwiperItem, Image, Video } from '@tarojs/components'
import './index.scss'

interface Props {
  imageInfo: any
}

interface State {
  videoContext: Taro.VideoContext
  autoplay: boolean | undefined
  swiperIndex: number
  videoAutoplay: boolean | undefined
}

export default class MediaView extends Component<Props, State> {
  constructor(props) {
    super(props)
    this.state = {
      videoContext: Taro.createVideoContext('myVideo', this),
      autoplay: false,// 轮播图自动切换
      videoAutoplay: false,// 视频自动播放
      swiperIndex: 0
    }
  }

  componentDidMount() {
    const { videoContext } = this.state
    Taro.getNetworkType({
      success: function (res) {
        // 返回网络类型, 有效值：
        // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
        var networkType = res.networkType
        // wifi环境自动播放
        if (networkType == 'wifi') {
          videoContext.play()
        }
      }
    })
  }

  changeSwiper(e) {
    const { current } = e.detail
    const { videoContext } = this.state
    videoContext.pause()
    this.setState({
      swiperIndex: current
    })
  }

  // 轮播图与视频视图

  render() {
    const { autoplay, videoAutoplay, swiperIndex } = this.state
    const { imageInfo } = this.props
    const { video = {}, wheel } = imageInfo
    const isVideo = JSON.stringify(video) != ('[]' || '{}')
    return imageInfo ? (
      <View className='swiper-wrap'>
        <Swiper
          className='goods-details-swiper'
          circular
          onChange={(e) => this.changeSwiper(e)}
          autoplay={autoplay}
        >
          {
            isVideo && video.url &&
            <SwiperItem>
              <Video
                className='swiper-video'
                src={video.url}
                id='myVideo'
                enablePlayGesture
                poster={wheel[0].url}
                controls
                autoplay={videoAutoplay}
                enableProgressGesture={false}
                onPlay={() => {
                  this.setState({
                    autoplay: false
                  })
                }}
              ></Video>
            </SwiperItem>
          }
          {
            wheel.map((img, idx) => {
              return (
                <SwiperItem key={img.url}>
                  <Image
                    mode='aspectFit'
                    className='swiper-img'
                    src={img.url}
                    style='width: 100%'
                  />
                  {
                    idx === 0 && imageInfo.promotion.length !== 0 ? <Image
                      mode='aspectFit'
                      className='shade-img'
                      src={imageInfo.promotion.detailsImageUrl}
                      style='width: 100%'
                    /> : ''
                  }
                </SwiperItem>
              )
            })
          }
        </Swiper>
        {
          (isVideo || imageInfo.wheel.length > 0) &&
          <View className='swiper-plugin'>
            {
              `${swiperIndex + 1}/${imageInfo.wheel.length + (isVideo ? 1 : 0)}`
            }
          </View>
        }

      </View>
    ) : null
  }
}
